<template>
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
      </div>
      <div class="bullshit">
        <div class="bullshit__oops">哎呀!</div>
        <div class="bullshit__headline">{{ message }}</div>
        <div class="bullshit__info">请检查您输入的网址是否正确，或点击下方按钮返回首页。</div>
        <a href="/m" class="bullshit__return-home">回首页</a>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Move404',
    created() {
    // 判断是手机还是pc-- //判断是否为移动端的设备，是移动端的话  跳转  mobile 页面
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      let w=document.createElement("script");
      w.charset='utf-8';
      w.src="https://weibanzhushou.com/api/ocs/widget.js";
      let s=document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(w,s)
    } else {
      this.$router.push('/404')
    }
  },
  computed: {
    message() {
      return '站长说不能进入这个页面...'
    }
  }
}
</script>

<style lang="scss" scoped>
.wscn-http404-container{
  transform: translate(-50%,-50%);
  position: absolute;
  top: 40%;
  left: 50%;
}
.wscn-http404 {
  
  width: 100%;
  padding: 0 2.667vw;
  // display: flex;
  .pic-404 {
    width: 64vw;
    margin-left: 13.333vw;
    &__parent {
      width: 100%;
    }
    &__child {
      position: absolute;
      &.left {
        width: 8.533vw;
        top: 0.907vw;
        left: 11.733vw;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      &.mid {
        width: 4.933vw;
        top: 0.533vw;
        left: 22.4vw;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
      }
      &.right {
        width: 6.667vw;
        top: 5.333vw;
        left: 26.667vw;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      @keyframes cloudLeft {
        0% {
          top: 2.267vw;
          left: 29.333vw;
          opacity: 0;
        }
        20% {
          top: 4.4vw;
          left: 25.067vw;
          opacity: 1;
        }
        80% {
          top: 10.8vw;
          left: 12.933vw;
          opacity: 1;
        }
        100% {
          top: 12.933vw;
          left: 8vw;
          opacity: 0;
        }
      }
      @keyframes cloudMid {
        0% {
          top: 1.333vw;
          left: 56vw;
          opacity: 0;
        }
        20% {
          top: 5.333vw;
          left: 48vw;
          opacity: 1;
        }
        70% {
          top: 17.333vw;
          left: 24vw;
          opacity: 1;
        }
        100% {
          top: 21.333vw;
          left: 16vw;
          opacity: 0;
        }
      }
      @keyframes cloudRight {
        0% {
          top: 13.333vw;
          left: 66.667vw;
          opacity: 0;
        }
        20% {
          top: 16vw;
          left: 61.333vw;
          opacity: 1;
        }
        80% {
          top: 24vw;
          left: 45.333vw;
          opacity: 1;
        }
        100% {
          top: 26.667vw;
          left: 40vw;
          opacity: 0;
        }
      }
    }
  }
  .bullshit {
    width: 80%;
    height: 40vw;
    text-align: center;
    margin: auto;
    margin-top: 9.333vw;
    &__oops {
      font-size: 4.8vw;
      font-weight: bold;
      color: #1482f0;
      opacity: 0;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
    &__headline {
      font-size: 3.467vw;
      color: #222;
      font-weight: bold;
      opacity: 0;
      margin: 1.067vw 0;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.1s;
      animation-fill-mode: forwards;
    }
    &__info {
      font-size: 2.4vw;
      color: grey;
      opacity: 0;
      margin-bottom: 1.6vw;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    &__return-home {
      display: block;
      width: 24.8vw;
      height: 8.533vw;
      background: #1482f0;
      border-radius: 4.267vw;
      text-align: center;
      text-decoration:none;
      color: #ffffff;
      opacity: 0;
      font-size: 3.467vw;
      line-height: 8.533vw;
      margin: auto;
      cursor: pointer;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.3s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp {
      0% {
        transform: translateY(24px);
        opacity: 0;
        
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>
